<template>
	<div>
		<div class="item_category" :id="itemCategory">
			<div class="item_category-block">
				<div class="block_item" v-for="(s,index) in crowdSubjectList" v-if="index == 0">
					<router-link tag="ul" :to="{ name: 'allCategory' }">
						<li><img :src="s.icon"></li>
						<li><span>{{s.name}}</span></li>
					</router-link>
				</div>
				<div class="block_item" v-for="(s,index) in crowdSubjectList" v-if="index < 4 && index > 0">
					<router-link tag="ul" :to="{ name: 'subject', params: { subjectId: s.id }}">
						<li><img :src="s.icon"></li>
						<li><span>{{s.name}}</span></li>
					</router-link>
				</div>
			</div>
			<div class="item_category-block">
				<div class="block_item" v-for="(s,index) in crowdSubjectList" v-if="index >= 4 && index < 8">
					<router-link tag="ul" :to="{ name: 'subject', params: { subjectId: s.id }}">
						<li><img :src="s.icon"></li>
						<li><span>{{s.name}}</span></li>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import '../index.less'
	export default {
		computed: mapGetters({
			crowdSubjectList:'crowdSubjectList',
		}),
		methods: {
			...mapActions([
				'getCrowdSubjects',
			]),
			nextPage(item){
                // this.$router.to({name: 'subject', params: {subjectId: 1}});
			}
		},
		created (){
			this.$store.dispatch( 'getCrowdSubjects','grid' )
		}
	}
</script>





